export const Canvans = ()=>{
    // 获取节点
const ocanvas = document.querySelector("#mycanvas")
// 获取绘笔
const pen = ocanvas.getContext("2d")
// 获取节点宽和高
const canvasWidth = ocanvas.clientWidth
const canvasHeight = ocanvas.clientHeight

// 主函数
function main() {
    pen.clearRect(0,0,200,50)
    // 绘制矩形
    drawRect()
    // 绘制线条
    drawLine(10)
    // 绘制气泡
    drawArc(6)
    // 绘制文本
    drawText()
}
  main()

// 1、绘制矩形，以及添加随机颜色
function drawRect() {
    // 必须先绘制矩形背景颜色
    pen.fillStyle = randomColor()
    // 再绘制矩形区域
    pen.fillRect(0, 0, 200, 50)

}
// 2、绘制线条，及随机颜色
function drawLine(num) {
    for (let index = 0; index < num; index++) {
     // 随机参数不同长度及颜色的线条
     pen.beginPath()
     pen.strokeStyle = randomColor()
     pen.moveTo(randomW(),randomH())
     pen.lineTo(randomW(),randomH())
     pen.stroke() 
    //  pen.closePath()
    }
}
// 3、绘制气泡
function drawArc(num){
    for (let index = 0; index < num; index++) {
         // 绘制一个圆形（宽，高，圆半径，圆弧起点，圆弧度数），
        pen.beginPath()
        pen.arc(randomW(),randomH(),Math.random()*5+2,0,Math.PI/180*360)
        pen.fillStyle = randomColor()
        pen.stroke()
        pen.fill()
    }
}

// 4、绘制文本
function drawText(){
    for (let index = 0; index < 4; index++) {
        const ostr =  randomText()
        pen.save()
        // 文本字体大小随机
        pen.font = parseInt(Math.random()*35+15)+"px Vandana"
        // 文本颜色随机
        pen.fillStyle = randomColor()
        // 文本旋转一定角度随机
        pen.rotate(Math.PI/180 * Math.random()*30)
        // 文本随机（内容，宽，高）
        pen.fillText(ostr,canvasWidth/4*index,canvasHeight/2+15)
        pen.restore()
    }
}

// 参数随机颜色
function randomColor() {
    const val1 = parseInt(Math.random() * 256)
    const val2 = parseInt(Math.random() * 256)
    const val3 = parseInt(Math.random() * 256)
    return `rgb(${val1},${val2},${val3})`
}
// 随机参数宽高
function randomW() {
    const positionX = Math.random() * canvasWidth
    return positionX
}
function randomH() {
    const positionY = Math.random() * canvasHeight
    return positionY
}

// 随机产生数字
function randomText(){
    const str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";
    const index = parseInt(Math.random()*str.length)
    return str[index]
}

ocanvas.onclick = main
}